<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // callback hell

        // 获取第一份数据
        $.get(url1, (data1) => {
            console.log(data1);

            // 获取第二份数据
            $.get(url2, (data2) => {
                console.log(data2);

                // 获取第三份数据
                $.get(url3, (data3) => {
                    console.log(data3);

                    // 还可能有更多的数据
                })
            })
        })

        // Promise
        function getData(url) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url,
                    success(data) {
                        resolve(data)
                    },
                    error(err) {
                        reject(err)
                    }
                })
            })
        }
        // 依次获取三个url
        const url1 = '/data1.json'
        const url2 = '/data2.json'
        const url3 = '/data3.json'
        getData(url1).then(data1 => {
            console.log(data1);
            return getData(url2)
        }).then(data2 => {
            console.log(data2);
            return getData(url3)
        }).then(data3 => {
            console.log(data3);
        }).catch(err => console.error(err))
    </script>
</body>

</html>